<template>
  <div class="teaching-building-info">
    <!-- 筛选条件 -->
    <condition-card @reset="reset" @search="onSubmit">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('classroom.towerName')">
            <el-input v-model="queryFrom.name" :placeholder="$t('message.plzSelect')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('classroom.department')">
            <DictSelect :plzSelect="true" v-model="queryFrom.departmentCode" :clearable="true" :data="options.departmentCode" ></DictSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('classroom.campus')">
            <DictSelect :plzSelect="true" v-model="queryFrom.campus" :data="options.campus" :clearable="true" ></DictSelect>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>

    <!-- 基本信息列表 -->
    <el-card shadow="never">
      <div class="edu-opertion-bar">
        <div class="float-left">
          <el-input v-model="queryFrom.condition" :placeholder="$t('classroomCheckTips.plzInputCampusOrDepartment')" suffix-icon="el-icon-search" style="width:240px" @keyup.enter.native="onSubmit" />
        </div>
        <div class="float-right">
          <el-button v-show="isAdmin" @click="exportTower">{{$t("message.export")}}</el-button>
          <el-button  v-show="isAdmin" type="primary" @click="openAddDialog" >{{$t("classroom.creat")}}</el-button>
        </div>
        <div class="clear-both"></div>
      </div>
      <EduTable :order="false" :page-num="queryFrom.pageNum_" :data="teachingBuildingList.data" :total="teachingBuildingList.total" @page-change="pageChange" @selection-change="handleSelectionChange" >
        <el-table-column :label="$t('classroom.towerName')">
          <template slot-scope="scope">
            <el-button type="text" @click="openClassroomDetails(scope.row)">{{scope.row.name}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('classroom.nameEn')">
          <template slot-scope="scope">{{scope.row.nameEn}}</template>
        </el-table-column>
        <el-table-column :label="$t('classroom.campus')">
          <template slot-scope="scope">{{scope.row.campusI18n}}</template>
        </el-table-column>
        <el-table-column :label="$t('classroom.department')">
          <template slot-scope="scope">{{scope.row.departmentCodeI18n}}</template>
        </el-table-column>
        <el-table-column :label="$t('message.operating')">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="openEditDialog(scope.row)" >{{$t('message.edit')}}</el-button>
            <el-button type="text" size="mini" @click="delTower(scope.row.id)" v-if="scope.row.maintainable" >{{$t('message.delete')}}</el-button>
          </template>
        </el-table-column>
      </EduTable>
    </el-card>
    <!-- 新建、修改教学楼 -->
    <edu-dialog ref="teachingBuidingInfo"  class="systemDialog clearShaking"  :title="$t('classroomTower.classroomTowerBasicInfo')">
      <el-form ref="teachingBuidingFrom" :model="teachingBuidingFrom" :rules="teachingBuidingRules" label-position="right" label-width="120px" >
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('classroom.towerName')" prop="name">
              <el-input type="text" v-model="teachingBuidingFrom.name" :placeholder="$t('inputPlaceholder')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('classroom.nameEn')">
              <el-input type="text"  v-model="teachingBuidingFrom.nameEn" :placeholder="$t('inputPlaceholder')" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('classroom.campus')" prop="campus">
              <DictSelect :plzSelect="true" v-model="teachingBuidingFrom.campus" :data="options.campus" :clearable="true" ></DictSelect>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('classroom.department')" prop="departmentCode">
              <DictSelect :plzSelect="true" v-model="teachingBuidingFrom.departmentCode" :clearable="true" :data="options.departmentCode" ></DictSelect>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('classroom.remark')">
              <el-input  type="textarea" :rows="2" v-model="teachingBuidingFrom.remark" maxlength="255" show-word-limit ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="buttons">
        <el-button @click="cancelAddOrEdit">{{$t("message.cancel")}}</el-button>
        <el-button type="primary" @click="addOrEdit">{{$t("message.confirm")}}</el-button>
      </span>
    </edu-dialog>
    <!-- 教学楼详情 -->
    <edu-dialog width="65%"  ref="classroomTowerDetailDialog" class="classroomTowerDetailDialog"  :title="$t('classroomTower.clssroomTowerDetail')"  :showButtons="false" >
      <room-tower-info-details :classroomTowerDetail="classroomTowerDetail" />
    </edu-dialog>
  </div>
</template>

<script>
import { queryDic } from "common/src/api/dictionary";
import * as API from "common/src/api/resource/classroom";
import UTILS from "common/src/utils/utils";
import roomTowerInfoDetails from "./components/roomTowerInfoDetails";
export default {
  name: "teachingBuildingInfo",
  components: {
    roomTowerInfoDetails
  },
  data() {
    return {
      // 筛选及查询数据的对象
      queryFrom: {
        pageNum_: 1,
        pageSize_: 20,
        name: "", //   教学楼名称
        departmentCode: "", //  部门
        campus: "", // 校区
        condition: "", // 搜索内容
        ids: []
      },
      isEdit: false,
      options: {
        departmentCode: [],
        campus: []
      },
      teachingBuildingList: {
        data: [],
        total: 0
      },
      idList: [],
      teachingBuidingFrom: {
        name: "",
        nameEn: "",
        campus: "",
        code: "",
        remark: ""
      },
      teachingBuidingRules: {
        name: [
          {
            required: true,
            message: this.$t("classroomCheckTips.plzInputClassroomTowerName"),
            trigger: "blur"
          }
        ],
        campus: [
          {
            required: true,
            message: this.$t("classroomCheckTips.plzChooseCampus"),
            trigger: "blur"
          }
        ],
        departmentCode: [
          {
            required: false,
            message: this.$t("classroomCheckTips.plzChooseDept"),
            trigger: "change"
          }
        ]
      },
      //教学楼详情列表
      classroomTowerDetail: [],
      isAdmin: true
    };
  },
  methods: {
    // 获取下拉框数据（数据字典）
    initOptions() {
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_YX", "X_XQ"]
      };
      queryDic(data).then(res => {
        if (res.code == 200) {
          UTILS.fillSelect(
            {
              campus: "X_XQ",
              departmentCode: "X_YX"
            },
            res.data,
            this.options
          );
        }
      });
    },
    // 获取教学楼列表数据方法
    async initTowerData() {
      let res = await API.findTowerPage(this.queryFrom);
      if (res && res.code == 200) {
        this.teachingBuildingList.data = res.data.list;
        this.teachingBuildingList.total = res.data.total_;
      }
    },
    pageChange(val) {
      this.queryFrom.pageNum_ = val.pageNum;
      this.queryFrom.pageSize_ = val.pageSize;
      this.initTowerData();
    },
    handleSelectionChange(val) {
      this.queryFrom.ids = val.map(item => {
        return item.id;
      });
    },
    // 重置初始化筛选条件
    reset() {
      this.queryFrom.condition = "";
      this.initqueryFrom();
    },
    onSubmit() {
      this.queryFrom.pageNum_ = 1;
      this.queryFrom.pageSize_ = 20;
      this.initTowerData();
    },
    // 重置筛选条件
    initqueryFrom() {
      this.queryFrom.name = "";
      this.queryFrom.departmentCode = "";
      this.queryFrom.campus = "";
      this.initTowerData();
    },
    // 打开新增、编辑弹窗
    openAddDialog() {
      this.isEdit = false;
      this.teachingBuidingFrom = {
        name: "",
        nameEn: "",
        campus: "",
        code: "",
        remark: "",
        departmentCode: "",
        id: ""
      };
      this.$refs.teachingBuidingInfo.open();
    },
    openEditDialog(info) {
      this.isEdit = true;
      this.$refs.teachingBuidingInfo.open();
      this.teachingBuidingFrom = {
        name: info.name,
        nameEn: info.nameEn,
        campus: info.campus,
        code: info.code,
        remark: info.remark,
        departmentCode: info.departmentCode,
        id: info.id
      };
    },
    cancelAddOrEdit() {
      this.isEdit = false;
      this.$refs.teachingBuidingInfo.close();
      this.$refs["teachingBuidingFrom"].resetFields();
    },
    addOrEdit() {
      this.$refs["teachingBuidingFrom"].validate(valid => {
        if (valid) {
          if (this.isEdit) {
            API.updateTower(this.teachingBuidingFrom).then(res => {
              if (res && res.code === 200) {
                this.$message({
                  type: "success",
                  message: this.$t("classroomResponseMessage.updateTowerSuccess")
                });
                this.$refs.teachingBuidingInfo.close();
                this.onSubmit();
              } else {
                this.$message({
                  type: "info",
                  message: response.msg
                });
              }
            });
          } else {
            API.addTower(this.teachingBuidingFrom).then(res => {
              if (res && res.code === 200) {
                this.$message({
                  type: "success",
                  message: this.$t("classroomResponseMessage.addTowerSuccess")
                });
                this.$refs.teachingBuidingInfo.close();
                this.onSubmit();
              } else {
                this.$message({
                  type: "info",
                  message: response.msg
                });
              }
            });
          }
        }
      });
    },
    // 删除教学楼操作
    delTower(id) {
      let params = { id: id };
      this.$confirm(
        this.$t("message.deleteConfirm"),
        this.$t("message.confirm"),
        {
          distinguishCancelAndClose: false,
          confirmButtonText: this.$t("message.confirm"),
          cancelButtonText: this.$t("message.cancel")
        }
      ).then(() => {
        API.delTower(params).then(res => {
          if (res && res.code === 200) {
            this.$message({
              type: "success",
              message: this.$t("message.deleteSuccess")
            });
            this.queryFrom.ids = [];
            this.onSubmit();
          }
        });
      });
    },
    // 打开查看教学楼详情
    openClassroomDetails(info) {
      this.$refs.classroomTowerDetailDialog.open();
      let cloneInfo = _.clone(info);
      this.classroomTowerDetail = cloneInfo;
    },
    // 导出楼层信息
    exportTower() {
      let res = API.exportClassroomTowerInfo(this.queryFrom);
    },
    getIsAdmin() {
      let mockerUser = this.$store.getters.getMockUser();
      let user = mockerUser ? mockerUser : this.$store.getters.getUser();
      let tempCurrentRole = user.currentRole;
      let tempInnerRoles = user.innerRoles;
      if (
        tempCurrentRole === "1" &&
        (tempInnerRoles.includes("1") || tempInnerRoles.includes("2"))
      ) {
        this.isAdmin = true;
      } else {
        this.isAdmin = false;
      }
    }
  },
  created() {
    // 初始化筛选条件下拉框数据
    this.getIsAdmin();
    this.initOptions();
    // 获取教学楼列表数据
    this.initTowerData();
  }
};
</script>

<style lang="scss" scoped>
</style>
